<template>
  <div class="container">
    <div class="container_page">
      <page-header :title="$t('wallet_transactionRecord')"></page-header>
      <div class="page_body">
        <van-pull-refresh
          v-model="loading"
          @refresh="onRefresh"
          :loading-text="$t('Loading')"
          :pulling-text="$t('Loading')"
          :loosing-text="$t('Loading')"
        >
          <template v-if="list.length != 0">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="
                list.length == 0 ? $t('error_empty') : $t('No_more')
              "
              @load="loadData"
            >
              <div
                class="card"
                v-for="item in list"
                :key="item.id"
                @click="toDetailPage(item)"
              >
                <div class="message">
                  <div class="left">
                    <div class="order_status">
                      <div class="dot"></div>
                      <div class="status">
                        {{ $t(payStatusMap[item.type].label) }}
                      </div>
                      <img
                        v-if="item.refund"
                        style="width: 14px;height: 14px;margin-left: 6px;"
                        :src="require('@/assets/img/pay/ic_refunded@2x.png')"
                      />
                    </div>
                    <div class="order_brief">
                      {{ getPayMethod(item.paymentMethod, item) }}
                    </div>
                    <div class="order_brief">
                      {{ item.createTime | dateformat }}
                    </div>
                    <div
                      class="order_brief"
                      v-if="item.refund"
                    >
                      {{ $t('renturn_tip') }}
                    </div>
                  </div>
                  <div class="right flex_center">
                    <div class="order_amount">
                      <span style=" margin-top: -4px; margin-right: 2px;"
                        >-</span
                      >
                      <span>
                        {{
                          getAmount(item.type, item)
                            | amountFormats($currencyVal.symbol)
                        }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </template>
          <div
            v-else
            style=" height: calc(100vh - var(--page-header-height));box-sizing: border-box;"
          >
            <empty-data orderType></empty-data>
          </div>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import $api from '@/assets/js/api/index'
import share from '@/mixins/share'
export default {
  mixins: [share],
  data () {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      pageOffset: -20,
      list: [],
      payStatusMap: {
        1: {
          label: 'pay_rental', //租借
          isRefund: false
        },
        2: {
          label: 'pay_rental', //租借
          isRefund: true
        },
        5: {
          label: 'wallet_deposit', //押金
          isRefund: false
        },
        6: {
          label: 'wallet_deposit', //押金
          isRefund: true
        },
        7: {
          label: 'pay_powerbank', //罚金
          isRefund: false
        },
        8: {
          label: 'pay_powerbank', //罚金
          isRefund: true
        }
      },
      payMethodMap: {
        1: 'wallet_type_bankcard',
        3: 'wallet_type_applepay',
        4: 'wallet_type_googlepay'
      }
    }
  },
  created () {
    this.getLang()
  },
  methods: {
    getPayMethod (type, item) {
      let res = this.$t(this.payMethodMap[type])
      return type == 1 ? item.bankNo ? res + `(${item.bankNo})` : res  : res
    },
    getAmount (type, item) {
      const isRefund = item.refund
      let amount = item.realAmount

      if (![1, 2].includes(type) && !isRefund) {
        amount = Math.abs(item.amount)
        return amount
      }
      amount = isRefund
        ? Math.abs(item.refundAmount)
        : Math.abs(item.realAmount)
      return amount
    },
    loadData () {
      if (!this.finished) this.pageOffset += 20
      $api.user
        .getTransferList({}, { offset: this.pageOffset }, this.refreshing)
        .then(res => {
          if (res.code != '0') {
            this.global.toast(res.message)
            this.loading = false
            this.finished = true
            return
          }
          if (res.data.length < 20) {
            this.finished = true
          }
          if (this.refreshing) {
            this.refreshing = false
            this.list = res.data
          } else {
            this.list.push(...res.data)
          }
          this.loading = false
        })
    },
    onRefresh () {
      this.refreshing = true
      this.finished = false
      this.loading = true
      this.pageOffset = -20
      this.loadData()
    },
    toDetailPage (transferNo) {
      // this.$router.push({ path: "/pay/detail", query: { transferNo } });
      localStorage.setItem('pay_detail', JSON.stringify(transferNo))
      this.$router.push({ path: '/pay/detail' })
    }
  },
  mounted () {
    this.loadData()
  },
  computed: {}
}
</script>
<style scoped lang="scss">
.container {
  background-color: var(--page-bg);
}
.container_page {
  --page-header-height: 44px;
  margin: 0;
  background-color: var(--page-bg);
  width: 100%;
  flex: 1;
  box-sizing: border-box;
}
.van-list {
  margin-top: var(--gap);
}
.page_body {
  height: calc(100vh - var(--page-header-height));
  overflow: auto;
  box-sizing: border-box;
  background-color: var(--page-bg);
}
.card {
  margin: 0 var(--gap);
  background-color: var(--card-bg);
  border-radius: 10px;
  margin-bottom: 10px;
  .message {
    box-sizing: border-box;
    padding: var(--gap);
    display: flex;
    .left {
      flex: 1;
    }
    .right {
      justify-content: flex-end;
    }
  }
  .order_status {
    font-size: 17px;
    font-weight: 700;
    color: #39404d;
    display: flex;
    align-items: center;
    .dot {
      // width: 6px;
      // height: 6px;

      // border-radius: 50%;
      // margin-right: 6px;
    }
    margin-bottom: 14px;
  }
  .order_brief {
    font-size: 13px;
    font-weight: 500;
    color: #646b80;
    margin-bottom: 6px;
    &:nth-last-child(1) {
      margin-bottom: 2px;
    }
  }
  .order_amount {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: #39404d;
  }

  .action {
    border-top: 1px #d2d8e2 solid;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 40px;
    padding-right: var(--gap);
  }
  .to_pay {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    img {
      width: 6px;
      height: 10px;
      margin-left: 6px;
    }
  }
}
</style>
